/* Efecto de luz con combinación de colores morado y azul */

/* Resetear estilos anteriores */
.header-corporate-decoration,
.header-wave,
.elaborate-gradient,
.corporate-wave,
.corporate-wave-secondary,
.wave-pattern,
.gradient-border,
.center-decoration,
.side-decorations,
.dot-pattern,
.horizontal-shine,
.floating-elements {
  display: none;
}

/* Base del header */
header {
  position: relative;
  overflow: visible;
  z-index: 10;
  padding-bottom: 60px;
}

/* Eliminar efectos anteriores */
header::after {
  display: none;
}

/* Contenedor principal del efecto de luz */
.light-divider {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 15px;
  z-index: 30;
  overflow: hidden;
}

/* Línea base que define el borde entre header y body */
.divider-line {
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(110, 91, 168, 0.8) 0%, /* Morado oscuro */
    rgba(150, 131, 236, 0.8) 25%, /* Morado original */
    rgba(131, 177, 236, 0.8) 75%, /* Azul */
    rgba(100, 150, 220, 0.8) 100%); /* Azul oscuro */
  z-index: 31;
}

/* Efecto principal de luz con combinación de colores */
.light-beam {
  position: absolute;
  top: 1px;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, 
    rgba(110, 91, 168, 0.7) 0%, /* Morado oscuro */
    rgba(150, 131, 236, 0.8) 25%, /* Morado claro */
    rgba(131, 177, 236, 0.8) 75%, /* Azul claro */
    rgba(100, 150, 220, 0.7) 100%); /* Azul oscuro */
  z-index: 35;
  opacity: 1;
  filter: blur(2px);
  animation: dramatic-pulse 1.5s infinite ease-in-out;
  box-shadow: 0 0 20px 5px rgba(131, 177, 236, 0.6), 0 0 20px 5px rgba(150, 131, 236, 0.6); /* Sombra combinada */
}

/* Beam secundario con combinación de colores */
.light-beam-secondary {
  position: absolute;
  top: 3px; 
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, 
    rgba(110, 91, 168, 0.7) 0%, /* Morado oscuro */
    rgba(150, 131, 236, 1) 25%, /* Morado claro */
    rgba(131, 177, 236, 1) 75%, /* Azul claro */
    rgba(100, 150, 220, 0.7) 100%); /* Azul oscuro */
  z-index: 36;
  opacity: 0.9;
  filter: blur(1px);
  animation: dramatic-wave 2s infinite ease-in-out;
  transform-origin: center center;
}

/* Efecto de partículas que se mueven - ahora con colores alternados */
.moving-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  z-index: 37;
  overflow: hidden;
}

.light-particle {
  position: absolute;
  width: 50px;
  height: 3px;
  top: 5px;
  border-radius: 2px;
  filter: blur(1px);
  opacity: 0;
  animation: fast-particle-move 2s linear infinite;
}

/* Alternamos colores entre morado y azul */
.light-particle:nth-child(1) {
  background: linear-gradient(90deg, 
    rgba(110, 91, 168, 0) 0%,
    rgba(150, 131, 236, 0.95) 50%,
    rgba(110, 91, 168, 0) 100%);
  animation-delay: 0s;
  width: 70px;
}

.light-particle:nth-child(2) {
  background: linear-gradient(90deg, 
    rgba(100, 150, 220, 0) 0%,
    rgba(131, 177, 236, 0.95) 50%,
    rgba(100, 150, 220, 0) 100%);
  animation-delay: 0.3s;
  width: 60px;
}

.light-particle:nth-child(3) {
  background: linear-gradient(90deg, 
    rgba(110, 91, 168, 0) 0%,
    rgba(150, 131, 236, 0.95) 50%,
    rgba(110, 91, 168, 0) 100%);
  animation-delay: 0.6s;
  width: 80px;
}

.light-particle:nth-child(4) {
  background: linear-gradient(90deg, 
    rgba(100, 150, 220, 0) 0%,
    rgba(131, 177, 236, 0.95) 50%,
    rgba(100, 150, 220, 0) 100%);
  animation-delay: 0.9s;
  width: 65px;
}

.light-particle:nth-child(5) {
  background: linear-gradient(90deg, 
    rgba(110, 91, 168, 0) 0%,
    rgba(150, 131, 236, 0.95) 50%,
    rgba(110, 91, 168, 0) 100%);
  animation-delay: 1.2s;
  width: 75px;
}

.light-particle:nth-child(6) {
  background: linear-gradient(90deg, 
    rgba(100, 150, 220, 0) 0%,
    rgba(131, 177, 236, 0.95) 50%,
    rgba(100, 150, 220, 0) 100%);
  animation-delay: 1.5s;
  width: 55px;
}

/* Efecto de barrido horizontal con colores combinados */
.light-sweep {
  position: absolute;
  top: 3px;
  left: -100%;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, 
    rgba(150, 131, 236, 0) 0%,
    rgba(150, 131, 236, 0.2) 15%,
    rgba(150, 131, 236, 0.95) 40%, /* Morado */
    rgba(131, 177, 236, 0.95) 60%, /* Azul */
    rgba(131, 177, 236, 0.2) 85%,
    rgba(131, 177, 236, 0) 100%);
  z-index: 37;
  opacity: 1;
  filter: blur(1px);
  animation: fast-sweep 3s infinite linear;
}

/* Segundo barrido con colores invertidos */
.light-sweep-secondary {
  position: absolute;
  top: 3px;
  right: -100%;
  width: 80%;
  height: 5px;
  background: linear-gradient(90deg, 
    rgba(131, 177, 236, 0) 0%,
    rgba(131, 177, 236, 0.2) 15%,
    rgba(131, 177, 236, 0.95) 40%, /* Azul */
    rgba(150, 131, 236, 0.95) 60%, /* Morado */
    rgba(150, 131, 236, 0.2) 85%,
    rgba(150, 131, 236, 0) 100%);
  z-index: 37;
  opacity: 0.9;
  filter: blur(1px);
  transform: scaleX(-1);
  animation: fast-sweep-secondary 3.5s infinite linear 1s;
}

/* Línea fina brillante con gradiente de colores */
.light-line {
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(110, 91, 168, 0.7) 0%, /* Morado oscuro */
    rgba(150, 131, 236, 1) 30%, /* Morado claro */
    rgba(131, 177, 236, 1) 70%, /* Azul claro */
    rgba(100, 150, 220, 0.7) 100%); /* Azul oscuro */
  z-index: 38;
  opacity: 1;
  box-shadow: 0 0 15px 3px rgba(131, 177, 236, 0.6), 0 0 15px 3px rgba(150, 131, 236, 0.6); /* Sombra combinada */
  animation: dramatic-glow-line 1.5s infinite ease-in-out;
}

/* Segunda capa de luz más amplia con colores combinados */
.light-beam-wide {
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 25px;
  background: linear-gradient(90deg, 
    rgba(110, 91, 168, 0.5) 0%, /* Morado oscuro */
    rgba(150, 131, 236, 0.6) 30%, /* Morado claro */
    rgba(131, 177, 236, 0.6) 70%, /* Azul claro */
    rgba(100, 150, 220, 0.5) 100%); /* Azul oscuro */
  z-index: 34;
  opacity: 0.7;
  filter: blur(5px);
  animation: dramatic-wide-pulse 2s infinite ease-in-out;
}

/* Efecto de destello vertical - alternamos colores */
.light-flare {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 40px;
  background: linear-gradient(to bottom, 
    rgba(150, 131, 236, 0) 0%, 
    rgba(150, 131, 236, 0.95) 50%, /* Morado */
    rgba(150, 131, 236, 0) 100%);
  z-index: 36;
  filter: blur(2px);
  opacity: 0.9;
  animation: dramatic-flare 1.5s infinite ease-out;
}

/* Destellos verticales adicionales con el color azul */
.light-flare-secondary {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%) rotate(20deg);
  width: 2px;
  height: 35px;
  background: linear-gradient(to bottom, 
    rgba(131, 177, 236, 0) 0%, 
    rgba(131, 177, 236, 0.9) 50%, /* Azul */
    rgba(131, 177, 236, 0) 100%);
  z-index: 36;
  filter: blur(1px);
  opacity: 0;
  animation: dramatic-flare-secondary 2s infinite ease-out 0.5s;
}

.light-flare-tertiary {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%) rotate(-20deg);
  width: 2px;
  height: 35px;
  background: linear-gradient(to bottom, 
    rgba(150, 131, 236, 0) 0%, 
    rgba(150, 131, 236, 0.9) 50%, /* Morado */
    rgba(150, 131, 236, 0) 100%);
  z-index: 36;
  filter: blur(1px);
  opacity: 0;
  animation: dramatic-flare-secondary 2s infinite ease-out 1s;
}

/* Efectos de halo lateral con colores combinados */
.light-halo-left {
  position: absolute;
  top: 5px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, 
    rgba(131, 177, 236, 1) 0%, /* Azul en el centro */
    rgba(150, 131, 236, 0.7) 30%, /* Transición a morado */
    rgba(110, 91, 168, 0.4) 70%,
    rgba(110, 91, 168, 0.2) 100%);
  z-index: 33;
  opacity: 0.9;
  animation: dramatic-halo 2s infinite ease-in-out;
  transform-origin: right center;
}

.light-halo-right {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, 
    rgba(150, 131, 236, 1) 0%, /* Morado en el centro */
    rgba(131, 177, 236, 0.7) 30%, /* Transición a azul */
    rgba(100, 150, 220, 0.4) 70%,
    rgba(100, 150, 220, 0.2) 100%);
  z-index: 33;
  opacity: 0.9;
  animation: dramatic-halo 2s infinite ease-in-out 0.5s;
  transform-origin: left center;
}

/* Destellos puntuales - alternamos colores */
.light-spark {
  position: absolute;
  top: 5px;
  width: 6px;
  height: 2px;
  border-radius: 50%;
  z-index: 39;
  filter: blur(1px);
  opacity: 0;
  animation: dramatic-spark 1.5s infinite;
  box-shadow: 0 0 10px 3px rgba(150, 131, 236, 0.7);
}

/* Distribuimos los destellos con colores alternados */
.light-spark:nth-child(1) {
  left: 10%;
  animation-delay: 0.2s;
  background-color: rgba(110, 91, 168, 1); /* Morado oscuro */
}

.light-spark:nth-child(2) {
  left: 30%;
  animation-delay: 0.4s;
  background-color: rgba(131, 177, 236, 1); /* Azul */
}

.light-spark:nth-child(3) {
  left: 50%;
  animation-delay: 0s;
  width: 8px;
  background-color: rgba(150, 131, 236, 1); /* Morado */
}

.light-spark:nth-child(4) {
  left: 70%;
  animation-delay: 0.6s;
  background-color: rgba(131, 177, 236, 1); /* Azul */
}

.light-spark:nth-child(5) {
  left: 90%;
  animation-delay: 0.3s;
  background-color: rgba(110, 91, 168, 1); /* Morado oscuro */
}

/* Destellos adicionales */
.light-spark:nth-child(6) {
  left: 20%;
  animation-delay: 0.8s;
  background-color: rgba(131, 177, 236, 1); /* Azul */
}

.light-spark:nth-child(7) {
  left: 40%;
  animation-delay: 0.3s;
  background-color: rgba(150, 131, 236, 1); /* Morado */
}

.light-spark:nth-child(8) {
  left: 60%;
  animation-delay: 0.5s;
  background-color: rgba(131, 177, 236, 1); /* Azul */
}

.light-spark:nth-child(9) {
  left: 80%;
  animation-delay: 0.1s;
  background-color: rgba(150, 131, 236, 1); /* Morado */
}

/* Efecto de resplandor para la transición al body */
.glow-transition {
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 30px;
  background: radial-gradient(ellipse at center top, 
    rgba(131, 177, 236, 0.3), /* Azul para un buen fundido con el body */
    rgba(226, 232, 245, 0) 70%);
  z-index: 32;
  opacity: 0.6;
  animation: dramatic-glow 2s infinite ease-in-out;
}

/* Transición suave hacia el body */
.body-transition {
  position: absolute;
  top: 6px;
  left: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(to bottom, 
    rgba(226, 232, 245, 0.5) 0%, 
    rgba(226, 232, 245, 0.8) 40%, 
    rgba(226, 232, 245, 1) 100%);
  z-index: 29;
}

/* Animaciones dramáticas */
@keyframes dramatic-pulse {
  0% {
    opacity: 0.7;
    filter: blur(2px);
    transform: scaleY(0.7);
    box-shadow: 0 0 20px 2px rgba(110, 91, 168, 0.5);
  }
  50% {
    opacity: 1;
    filter: blur(3px);
    transform: scaleY(1.7);
    box-shadow: 0 0 25px 5px rgba(131, 177, 236, 0.7);
  }
  100% {
    opacity: 0.7;
    filter: blur(2px);
    transform: scaleY(0.7);
    box-shadow: 0 0 20px 2px rgba(110, 91, 168, 0.5);
  }
}

@keyframes dramatic-wave {
  0% {
    opacity: 0.7;
    filter: blur(1px);
    transform: scaleX(0.85);
  }
  50% {
    opacity: 1;
    filter: blur(2px);
    transform: scaleX(1.15);
  }
  100% {
    opacity: 0.7;
    filter: blur(1px);
    transform: scaleX(0.85);
  }
}

@keyframes fast-sweep {
  0% {
    transform: translateX(0%);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  45% {
    transform: translateX(100%);
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: translateX(200%);
    opacity: 0;
  }
}

@keyframes fast-sweep-secondary {
  0% {
    transform: translateX(0%) scaleX(-1);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  45% {
    transform: translateX(-100%) scaleX(-1);
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: translateX(-200%) scaleX(-1);
    opacity: 0;
  }
}

@keyframes fast-particle-move {
  0% {
    left: -100px;
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    left: calc(100% + 100px);
    opacity: 0;
  }
}

@keyframes dramatic-glow-line {
  0% {
    opacity: 0.8;
    box-shadow: 0 0 8px 1px rgba(150, 131, 236, 0.5);
    transform: scaleX(0.95) scaleY(0.8);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 15px 3px rgba(131, 177, 236, 0.8);
    transform: scaleX(1.05) scaleY(1.5);
  }
  100% {
    opacity: 0.8;
    box-shadow: 0 0 8px 1px rgba(150, 131, 236, 0.5);
    transform: scaleX(0.95) scaleY(0.8);
  }
}

@keyframes dramatic-wide-pulse {
  0% {
    opacity: 0.5;
    filter: blur(5px);
    transform: scaleY(0.8);
  }
  50% {
    opacity: 0.8;
    filter: blur(8px);
    transform: scaleY(1.4);
  }
  100% {
    opacity: 0.5;
    filter: blur(5px);
    transform: scaleY(0.8);
  }
}

@keyframes dramatic-flare {
  0% {
    opacity: 0.3;
    height: 30px;
    filter: blur(2px);
    transform: translateX(-50%) scaleY(0.7);
  }
  50% {
    opacity: 1;
    height: 60px;
    filter: blur(3px);
    transform: translateX(-50%) scaleY(1.5);
  }
  100% {
    opacity: 0.3;
    height: 30px;
    filter: blur(2px);
    transform: translateX(-50%) scaleY(0.7);
  }
}

@keyframes dramatic-flare-secondary {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(20deg) scaleY(0.5);
  }
  30% {
    opacity: 0.9;
    transform: translateX(-50%) rotate(20deg) scaleY(1.8);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) rotate(20deg) scaleY(0.5);
  }
}

@keyframes dramatic-halo {
  0% {
    opacity: 0.7;
    transform: scaleX(0.85);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.15);
  }
  100% {
    opacity: 0.7;
    transform: scaleX(0.85);
  }
}

@keyframes dramatic-spark {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  15% {
    opacity: 1;
    transform: scale(3);
  }
  30% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes dramatic-glow {
  0% {
    opacity: 0.4;
    transform: scaleY(0.8);
  }
  50% {
    opacity: 0.8;
    transform: scaleY(1.2);
  }
  100% {
    opacity: 0.4;
    transform: scaleY(0.8);
  }
}

/* Ajustes responsive */
@media (max-width: 768px) {
  .light-flare {
    height: 35px;
  }
  
  @keyframes dramatic-flare {
    0%, 100% {
      height: 25px;
    }
    50% {
      height: 45px;
    }
  }
}